<template>
  <div>
    <!-- 去出租头部导航 -->
    <div>
      <van-nav-bar title="发布房源" left-arrow @click-left="$router.back()">
        <template #right></template>
      </van-nav-bar>
    </div>
    <div class="houseMessage">房源信息</div>
    <!-- 小区名称 -->
    <div>
      <van-cell title="小区名称" is-link value="请输入小区名称" />
      <van-field v-model="text" placeholder="请输入租金/月" label="租金" />
      <van-field v-model="tel" placeholder="请输入建筑面积" label="建筑面积" />
      <van-field v-model="number" label="所在楼层" />
        <van-field
          readonly
          clickable
          name="calendar"
          :value="value"
          label="户型"
          placeholder="请选择 >"
          @click="showCalendar = true"
        />
      <van-calendar v-model="showCalendar" @confirm="onConfirm" />
      <van-cell title="所在楼层" is-link value="请选择" />
      <van-cell title="朝阳" is-link value="请选择" />
    </div>
    <div class="houseTitle">
      <h3>房屋标题</h3>
      <textarea
        class="handline"
        placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
        v-model="title"
      ></textarea>
      <h3>房屋图像</h3>
      <van-uploader v-model="fileList" :after-read="afterRead">
        <van-button icon="plus"></van-button>
      </van-uploader>
      <h3>房屋配置</h3>
      <van-grid square>
        <van-grid-item
          v-for="(item, index) in houseConfig"
          :key="index"
          :column-num="5"
          :icon="item.icon"
          :text="item.txt"
        />
      </van-grid>
      <h3>房屋描述</h3>
      <textarea
        class="housemse"
        placeholder="请输入房屋描述信息"
        v-model="title"
      ></textarea>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LessonGoRentout',
  data() {
    return {
      value: '',
      showCalendar: false,
      title: '',
      tel: '',
      text: '',
      digit: '',
      number: '',
      password: '',
      houseConfig: [
        { txt: '衣柜', icon: 'icon-yg', acitved: false },
        { txt: '洗衣机', icon: 'icon-xyj', acitved: false },
        { txt: '空调', icon: 'icon-kt', acitved: false },
        { txt: '天然气', icon: 'icon-trq', acitved: false },
        { txt: '冰箱', icon: 'icon-bx', acitved: false },
        { txt: '暖气', icon: 'icon-nq', acitved: false },
        { txt: '电视', icon: 'icon-ds', acitved: false },
        { txt: '热水器', icon: 'icon-rsq', acitved: false },
        { txt: '宽带', icon: 'icon-wifi', acitved: false },
        { txt: '沙发', icon: 'icon-sf', acitved: false },
      ],
      fileList: [],
      columns: ['一室', '二室', '三室', '四室', '五室'],
    };
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    onConfirm(date) {
      this.value = `${date.getMonth() + 1}/${date.getDate()}`;
      this.showCalendar = false;
    },
  
  },
};
</script>

<style lang="less" scoped>
// 头部导航区域
/deep/.van-nav-bar,
.van-hairline--bottom {
  background-color: #21b97a;
  .van-icon,
  .van-icon-arrow-left,
  .van-nav-bar__arrow {
    color: #fff;
  }
  .van-nav-bar__title,
  .van-ellipsis {
    color: #fff;
  }
}
//房源信息
.houseMessage {
  width: 100%;
  height: 45px;
  color: #21b97a;
  padding-left: 10px;
  line-height: 45px;
  border-bottom: 1px solid #d9d8d8;
}
//房屋标题
.houseTitle {
  h3 {
    border-bottom: 1px solid #e7e2e2;
    font-size: 14px;
    color: #000;
    padding: 10px 0 5px 10px;
    font-weight: normal;
  }
}
.handline {
  padding-left: 10px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  border: none;
}
//房屋图像 button 框框
/deep/.van-button,
.van-button--default,
.van-button--normal {
  width: 83px;
  height: 83px;
  margin-left: 10px;
}
//房屋配置
//请输入房屋信息
.housemse {
  padding-left: 10px;
  width: 100%;
  height: 147px;
  line-height: 40px;
  border: none;
  font-size: 14px;
}
</style>
